<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%@ include file="/wxflow/jsp2/inc/head_css.jsp"%>

<style>
/* Additional style to fix warning dialog position */
#alertmod_table_list_2 {
	top: 900px !important;
}
</style>
<%@ include file="/wxflow/jsp2/inc/head.jsp"%>


<!-- 业务展示区 [start] -->
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="myModalLabel">保存内容</h4>
			</div>
			<div class="modal-body">
				<form id="myForm">
					<table class="table table-striped table-bordered">
						<tr>
							<td><input type="hidden" name="docId" id="docId" value="" />标题</td>
							<td><input type="text" id="docSubject" name="docSubject"
								placeholder="请输入标题" class="col-xs-10 col-sm-10"></td>
						</tr>
						<tr>
							<td colspan="2" id="line_time">
								
							</td>
						</tr>
					</table>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭
				</button>
				<button type="button" class="btn btn-primary"
					onclick="btn_save(this);">提交</button>
			</div>
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal -->
</div>

<div class="row wrapper border-bottom white-bg page-heading">
	<div class="col-lg-10">
		<ol class="breadcrumb">
			<li><a
				href="${pageContext.request.contextPath}/wxflow/jsp2/index.jsp">主页</a>
			</li>
			<li><a>配置管理</a></li>
			<li><strong>流程配置-流程模版</strong></li>
		</ol>
	</div>
	<div class="col-lg-2"></div>
</div>
<div class="wrapper wrapper-content  animated fadeInRight">
	<div class="row">
		<div class="col-lg-12">
			<div class="ibox ">
				<div class="ibox-title">
					查询条件
					<div class="ibox-tools">
						<a class="collapse-link"> <i class="fa fa-chevron-up"></i>
						</a> <a class="dropdown-toggle" data-toggle="dropdown"
							href="form_basic.html#"> <i class="fa fa-wrench"></i>
						</a>
						<ul class="dropdown-menu dropdown-user">
							<li><a href="#" id="btn_add"><i class="fa fa-edit"></i>新增</a></li>
							<li><a href="#" id="btn_mod"><i class="fa fa-edit"></i>修改</a></li>
							<li><a href="#" id="btn_del"><i class="fa fa-trash"></i>删除</a></a></li>
						</ul>
						<a class="close-link"> <i class="fa fa-times"></i>
						</a>
					</div>
				</div>
				<div class="ibox-content">

					<div class="form-inline">
						<label for="sDocSubject">标题</label> <input type="text"
							class="form-control" id="sDocSubject">
						<button type="button" id="btn_search" class="btn btn-danger">搜索</button>
					</div>

				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-lg-12">
			<div class="ibox ">


				<div class="ibox-content">

					<div class="jqGrid_wrapper">
						<div id="pager_list_2"></div>
						<table id="table_list_2"></table>

					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- 业务区展示 [end] -->

<%@ include file="/wxflow/jsp2/inc/foot.jsp"%>
<!-- 业务js控制区 [start] -->
<!-- Peity -->
<script
	src="${pageContext.request.contextPath}/wxflow/res2/js/plugins/peity/jquery.peity.min.js"></script>

<!-- jqGrid -->
<script
	src="${pageContext.request.contextPath}/wxflow/res2/js/plugins/jqgrid/i18n/grid.locale-cn.js"></script>
<script
	src="${pageContext.request.contextPath}/wxflow/res2/js/plugins/jqgrid/jquery.jqGrid.min.js"></script>
<script
	src="${pageContext.request.contextPath}/wxflow/res2/js/plugins/jquery-ui/jquery-ui.min.js"></script>

<!-- Page-Level Scripts -->
<script>
	//流程图显示
	function fn_flowLineTime(docId){
		var data = new Object();
		data['tplId'] = docId;
		data['docStatus'] = "10";
		data['pageNo'] = "1";
		data['pageSize'] = "99";
		$
				.ajax({
					url : "${pageContext.request.contextPath}/admin/wxflowTplNode/list.do",
					async : false,
					dataType : 'json',
					type : 'GET',
					data : data,
					success : function(rtn, textStatus) {
						var htmlStr = "";
						htmlStr += "<div id='vertical-timeline' class='vertical-container light-timeline'>";
						$.each(rtn.data.listData, function(i, item) {
							htmlStr += "<div class='vertical-timeline-block'>";
							htmlStr += "	<div class='vertical-timeline-icon blue-bg'>";
							
							if(item.actionId == "00"){//审批
								htmlStr += "	<i class='fa fa-user'></i>";
							}else if(item.actionId == "10"){//机器人节点
								htmlStr += "	<i class='fa fa-truck'></i>";
							}else if(item.actionId == "20"){//分支节点
								htmlStr += "	<i class='fa fa-sitemap'></i>";
							}else if(item.actionId == "30"){//抄送
								htmlStr += "	<i class='fa fa-users'></i>";
							}else {//其他
								htmlStr += "	<i class='fa fa-question'></i>";
							}
							
							
							htmlStr += "	</div>";
							
							htmlStr += "	<div class='vertical-timeline-content'>";
							htmlStr += "		<h2>"+item.docSubject+"</h2>";
							htmlStr += "		<p>节点审批者:"+item.curActorName+"</p>";
							htmlStr += "		<span class='vertical-date'><small>["+item.fdOrder+"]</small></span>";
							htmlStr += "	</div>";
							htmlStr += "</div>";
							
						});
						htmlStr += "</div>";
						$("#line_time").html(htmlStr);
					},
					error : function(jqXHR, textStatus,
							errorThrown) {
						var sessionstatus = jqXHRgetResponseHeader("sessionstatus");
						if (sessionstatus == "timeout") {
							alert(i1510.sessionOutMes);
							var req_address = i1510.sessionOutUrl;
							window.location.href = req_address;
						}
					}

				});
	}
	//更新表格
	function fn_freshGrid(pageNo) {
		$("#table_list_2").jqGrid('setGridParam', {
			mtype : 'POST',
			datatype : 'json',
			postData : {
				sDocSubject : $("#sDocSubject").val()
			}, //发送数据  
			page : pageNo
		}).trigger("reloadGrid"); //重新载入  
	}
	//查询
	function btn_search() {
		var pageNo = $('#table_list_2').getGridParam('page');
		fn_freshGrid(pageNo);

	}
	//增加
	function btn_add() {
		$("#docId").val("");
		$("#line_time").html("");
		$("#myModal").modal("show");
	}
	//保存
	function btn_save() {
		var data = new Object();
		data = $('#myForm').serialize();
		$.ajax({
			url : "${pageContext.request.contextPath}/admin/wxflowTpl/save.do",
			async : true,
			data : data,
			dataType : 'json',
			type : 'POST',
			success : function(rtn, textStatus) {
				//业务控制
				if (rtn.result == "success") {
					alert("提交成功!");
				} else {
					alert(rtn.message);
				}

			},
			error : function(jqXHR, textStatus, errorThrown) {
				var sessionstatus = jqXHRgetResponseHeader("sessionstatus");
				if (sessionstatus == "timeout") {
					alert(i1510.sessionOutMes);
					var req_address = i1510.sessionOutUrl;
					window.location.href = req_address;
				}
			}

		});
		$("#myModal").modal("hide");

	}
	//修改
	function btn_mod() {
		var ids = $("#table_list_2").jqGrid("getGridParam", "selarrrow");
		if (ids.length == 1) {
			var rowid = $("#table_list_2").jqGrid("getGridParam", "selrow");//单选
			var rowData = $("#table_list_2").jqGrid("getRowData", rowid);
			var data = new Object();
			data['docId'] = rowData.docId;
			$
					.ajax({
						url : "${pageContext.request.contextPath}/admin/wxflowTpl/view.do",
						async : true,
						data : data,
						dataType : 'json',
						type : 'GET',
						success : function(rtn, textStatus) {
							//业务控制
							if (rtn.result == "success") {
								$("#docId").val(rtn.data.docId);
								$("#docSubject").val(rtn.data.docSubject);
								
								//流程图显示
								fn_flowLineTime(rtn.data.docId);
								
								$("#myModal").modal("show");
							} else {
								alert(rtn.message);
							}

						},
						error : function(jqXHR, textStatus, errorThrown) {
							var sessionstatus = jqXHRgetResponseHeader("sessionstatus");
							if (sessionstatus == "timeout") {
								alert(i1510.sessionOutMes);
								var req_address = i1510.sessionOutUrl;
								window.location.href = req_address;
							}
						}

					});

		} else {
			alert("修改只能选中一条数据!");
		}

	}
	//删除
	function btn_del() {
		if (confirm("是否要删除?")) {
			var rowid = $("#table_list_2").jqGrid("getGridParam", "selrow");//单选
			if (rowid == null) {
				alert("删除时只能选中一条数据!");
			} else {

				var rowData = $("#table_list_2").jqGrid("getRowData", rowid);

				var data = new Object();
				data['docStatus'] = "00";
				data['docId'] = rowData.docId;
				$
						.ajax({
							url : "${pageContext.request.contextPath}/admin/wxflowTpl/updateStatus.do",
							async : true,
							data : data,
							dataType : 'json',
							type : 'POST',
							success : function(rtn, textStatus) {
								//业务控制
								if (rtn.result == "success") {
									alert("删除成功!");
								} else {
									alert(rtn.message);
								}

							},
							error : function(jqXHR, textStatus, errorThrown) {
								var sessionstatus = jqXHRgetResponseHeader("sessionstatus");
								if (sessionstatus == "timeout") {
									alert(i1510.sessionOutMes);
									var req_address = i1510.sessionOutUrl;
									window.location.href = req_address;
								}
							}

						});
			}
		}

	}
	//总入口
	$(document)
			.ready(
					function() {

						//获取配置信息
						fn_selAction("#actionId");
						$("#table_list_2")
								.jqGrid(
										{
											url : "${pageContext.request.contextPath}/admin/wxflowTpl/jqList.do",
											datatype : "json",
											mtype : 'GET',
											height : 'auto',
											autowidth : true,
											shrinkToFit : true,
											//loadonce:true,//关键所在  
											//userDataOnFooter: true,  
											rowNum : 10,
											sortname : 'docId',
											rowList : [ 10, 20, 30 ],
											colNames : [ '序号', '标题', '创建时间',
													'状态' ],
											colModel : [ {
												name : 'docId',
												index : 'docId',
												editable : true,
												hidden : true,
												search : false,
												sortable : false
											}, {
												name : 'docSubject',
												index : 'docSubject',
												sortable : false
											}, {
												name : 'docCreateTime',
												index : 'docCreateTime',
												sortable : false
											}, {
												name : 'docStatus',
												index : 'docStatus',
												formatter : fn_docStatus,
												sortable : false
											} ],
											jsonReader : {
												repeatitems : false,
												rows : "rows", // 数据行（默认为：rows）  
												total : "total", // 总记录数  
												page : "page", // 当前页  
												records : "records" // 总记录数   
											},
											pager : "#pager_list_2",//工具条的绑定位置
											viewrecords : true,//是否显示总纪录数
											caption : "流程模版列表",//表格名称
											add : false,
											edit : false,
											addtext : 'Add',
											edittext : 'Edit',
											multiselect : true, // 多选
											hidegrid : true,//是否可隐藏表格
											//page:1,
											toolbar : [ false, 'top' ],//是否显示工具栏
											totaltime : 0,
											emptyrecords : "没有符合的数据!",

											onPaging : function(pgButton) {
												var pageNo = $('#table_list_2')
														.getGridParam('page');

												if (pgButton == "next_pager_list_2") {
													//下一页
													pageNo = parseInt(pageNo) + 1;
												} else if (pgButton == "prev_pager_list_2") {
													//前一页
													pageNo = parseInt(pageNo) - 1;
												} else if (pgButton == "first_pager_list_2") {
													//第一页
													pageNo = 1;
												} else if (pgButton == "last_pager_list_2") {
													//最后一页
													pageNo = $(
															'#sp_1_pager_list_2')
															.text();
												} else if (pgButton == "user") {
													//当前页
													pageNo = parseInt(pageNo);
												}

												fn_freshGrid(pageNo);

											}

										});

						// Add responsive to jqGrid
						$(window).bind('resize', function() {
							var width = $('.jqGrid_wrapper').width();
							$('#table_list_2').setGridWidth(width);
						});

						//绑定
						$("#btn_add").bind("click", btn_add);
						$("#btn_mod").bind("click", btn_mod);
						$("#btn_del").bind("click", btn_del);
						$("#btn_search").bind("click", btn_search);
					});
</script>
<!-- 业务js控制区 [end] -->
